<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
     <style type="text/css">
         div{
             width: 200px;
             height: 200px;
             background-color: yellow;
             margin: 100px;
             perspective: 400px;
             -webkit-perspective: 400px;
             transform-style: preserve-3d;
             -webkit-transform-style: preserve-3d;
         }
         img{
             width: 200px;
             height: 200px;
             /*
               一共是四个参数，前三个取值：0或者1（如果是0默认没有取值，如果1则取后边的角度值）
                             第四个参数：旋转的角度
              如果旋转x轴：向上翻转
              如果旋转y轴：向右翻转
              如果旋转z轴：围绕中心点翻转
              如果x y z同时旋转：围绕四个对角线翻转

             */
             transform: rotate3d(1,0,1,60deg)  translateZ(50px);
             -webkit-transform:  rotate3d(1,0,1,60deg) translateZ(50px);

         }
         /*#box img{*/
             /*transform-origin: 100px 100px 100px;*/
             /*-webkit-transform-origin: 100px 100px 100px;*/
         /*}*/

     </style>
</head>
<body>
     <!--<div>-->
         <!--<img src="img/pic_01.png">-->
     <!--</div>-->
     <div id="box">
         <img src="img/pic_01.png">
     </div>

</body>
</html>